import React, { useState, useEffect } from 'react'
import { Toast, Cell, Input, Button, Checkbox } from 'zarm'
import CustomIcon from '@/components/CustomIcon'
// import Captcha from 'react-captcha-code'
import { post } from '@/utils'
import cx from 'classnames'

import s from './style.module.less'

const Login = () => {
    const [username, setusername] = useState('')
    const [password, setPassword] = useState('')
    // 验证码
    const [verify, setVerify] = useState('')
    // 验证码答案
    // const [captcha, setCaptcha] = useState('')

    const [type, setType] = useState('register')



    // // 刷新验证码
    // const handleChange = useCallback((captcha) => {
    //     console.log('captcha:', captcha);
    //     setCaptcha(captcha)
    // }, []);


    // 登入注册
    const onSubmit = async () => {
        if (!username) {
            Toast.show('请输入用户名！')
            return
        }
        if (!password) {
            Toast.show('请输入密码！')
            return
        }









        // 正常流程，开始准备发送接口请求！
        try {
            if (type == 'login') {
                // 登入
                const data = await post('/api/user/login', {
                    username,
                    password
                })
                console.log('登入成功后进行数据展示',data);
                Toast.show(data.msg)
                // 将token存储在localStorage里面
                // key   value
                localStorage.setItem('token', data.data.token)
                // 这里可以用history，这里简单用window，之后再改
                window.location.href = '/'



            } else {
                // 注册


                // if (!verify) {
                //     Toast.show('请输入验证码！')
                //     return
                // }
                // 判断验证码的正确性
                // if (verify != captcha) {
                //     Toast.show('验证码错误！')
                //     return
                // }
                const { data } = await post("/api/user/register", {
                    username,
                    password
                })

                console.log(data);
                Toast.show('注册成功！')
                setType('login')
            }

        } catch (err) {
            console.log(err);
        }





    }


    useEffect(() => {
        // document.title 能够直接改变每个页面的标题
        document.title = type == 'login' ? '登入' : '注册'
    }, [type])


    return (
        <div className={s.auth}>
            <div className={s.head} />
            <div className={s.tab}>
                <span className={cx({ [s.avtive]: type == 'login' })} onClick={() => setType('login')}>登录</span>
                <span className={cx({ [s.avtive]: type == 'register' })} onClick={() => setType('register')}>注册</span>
            </div>
            <div className={s.form}>
                <Cell icon={<CustomIcon type="zhanghao" />}>
                    <Input
                        clearable
                        type="text"
                        placeholder="请输入账号"
                        onChange={(value) => {
                            return setusername(value)
                        }}
                    />
                </Cell>
                <Cell icon={<CustomIcon type="mima" />}>
                    <Input
                        clearable
                        type="password"
                        placeholder="请输入密码"
                        onChange={(value) => {
                            return setPassword(value)
                        }}
                    />
                </Cell>
                {
                    type == 'register' ? <Cell icon={<CustomIcon type="mima" />}>
                        <Input
                            clearable
                            type="text"
                            placeholder="请输入验证码"
                            onChange={(value) => { setVerify(verify) }}
                        />
                        {/* <Captcha charNum={4} onChange={handleChange}/> */}
                    </Cell> : null
                }
            </div>
            <div className={s.operation}>
                {/*  */}
                {
                    type == 'register' ? <div className={s.agree}>
                        <Checkbox />
                        <label className="text-light">阅读并同意<a>《掘掘手札条款》</a></label>
                    </div> : null
                }
                <Button block theme="primary" onClick={onSubmit}>
                    {
                        type == 'login' ? '登入' : '注册'
                    }
                </Button>
            </div>
        </div>
    )
}

export default Login
